<template>
  <div class="change-password-form">
    <n-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      size="medium"
      :show-label="false"
    >
      <n-form-item path="oldPassword">
        <n-input
          v-model:value="formData.oldPassword"
          type="password"
          placeholder="请输入当前密码"
          :disabled="loading"
          show-password-on="click"
        >
          <template #prefix>
            <n-icon :size="18">
              <LockClosedOutline />
            </n-icon>
          </template>
        </n-input>
      </n-form-item>

      <n-form-item path="newPassword">
        <n-input
          v-model:value="formData.newPassword"
          type="password"
          placeholder="请输入新密码"
          :disabled="loading"
          show-password-on="click"
        >
          <template #prefix>
            <n-icon :size="18">
              <LockClosedOutline />
            </n-icon>
          </template>
        </n-input>
      </n-form-item>

      <n-form-item path="confirmPassword">
        <n-input
          v-model:value="confirmPassword"
          type="password"
          placeholder="请确认新密码"
          :disabled="loading"
          show-password-on="click"
        >
          <template #prefix>
            <n-icon :size="18">
              <LockClosedOutline />
            </n-icon>
          </template>
        </n-input>
      </n-form-item>

      <div class="form-actions">
        <n-button @click="$emit('cancel')" :disabled="loading">
          取消
        </n-button>
        <n-button
          type="primary"
          :loading="loading"
          @click="handleSubmit"
        >
          确认修改
        </n-button>
      </div>
    </n-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { useMessage } from 'naive-ui'
import { changePassword } from '@/api/account'
import { commonRules, createConfirmPasswordRules } from '@/utils/validation'
import type { FormInst } from 'naive-ui'
import type { ChangePasswordParams } from '@/types/user'
import { LockClosedOutline } from '@vicons/ionicons5'

interface Emits {
  (e: 'success'): void
  (e: 'cancel'): void
}

const emit = defineEmits<Emits>()
const message = useMessage()

// 表单引用
const formRef = ref<FormInst | null>(null)

// 表单数据
const formData = reactive<ChangePasswordParams>({
  oldPassword: '',
  newPassword: ''
})

const confirmPassword = ref('')

// 状态
const loading = ref(false)

// 表单验证规则
const formRules = computed(() => ({
  oldPassword: [
    {
      required: true,
      message: '请输入当前密码',
      trigger: ['blur', 'input']
    }
  ],
  newPassword: commonRules.password,
  confirmPassword: createConfirmPasswordRules(() => formData.newPassword)
}))

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    // 验证确认密码
    if (formData.newPassword !== confirmPassword.value) {
      message.error('两次输入的密码不一致')
      return
    }
    
    loading.value = true
    
    await changePassword(formData)
    message.success('密码修改成功')
    emit('success')
  } catch (error: any) {
    console.error('修改密码失败:', error)
    message.error(error.message || '修改密码失败，请重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.change-password-form {
  padding: 8px 0;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
</style>
